<template>
  <div class="noteDetail">
    <div class="header">
      <div class="left" @click="back">
        <van-icon name="arrow-left" size="25" />
      </div>
      <div class="center">
        <div class="left1">
          <div class="avatar" @click="toUser()">
            <van-image
              round
              width="34px"
              height="34px"
              :src="note.author.p"
              lazy-load
            />
          </div>
          <div class="nick-straight">
            <div class="top">
              <div class="nickname">{{ note.author.n }}</div>
              <div class="lv">LV.{{ note.author.lvl }}</div>
            </div>
            <div class="straight">{{ note.straight_text }}</div>
          </div>
        </div>
        <div v-if="!isFollow" class="follow" @click="follow(note.author.id)">
          关注
        </div>
        <div v-else class="isFollow" @click="noFollow(note.author.id)">
          已关注
        </div>
      </div>
      <div class="right">
        <van-icon name="ellipsis" size="25" />
      </div>
    </div>
    <div class="likeheader"></div>
    <div class="bigImg">
      <van-swipe :loop="false" height="auto">
        <van-swipe-item v-for="(image, index) in note.images" :key="index">
          <van-image width="375" height="auto" :src="image.u" lazy-load />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }} / {{ total }}</div>
        </template>
      </van-swipe>
      <div class="selection">{{ note.selection_text }}</div>
    </div>
    <div class="contentBox">
      <div class="content" v-for="content in note.contents" :key="content.id">
        <div class="text" :style="{ color: content.color }">
          {{ content.type == 3 ? `#${content.c}` : content.c }}
        </div>
      </div>
    </div>
    <div class="sub">
      <div class="right">
        <div class="like">{{ note.like_count_text }}次赞</div>
      </div>
    </div>
    <div class="likefooter"></div>
    <div class="footer">
      <div class="left">
        <div class="doComment">说点什么...</div>
        <div class="comments">
          <van-icon name="chat-o" size="25" />
          <div>评论</div>
        </div>
      </div>
      <div class="right">
        <div style="margin-right: 15px" @click="doCollect()">
          <van-icon name="like-o" size="25" />
          <div>{{ note.like_count_text }}</div>
        </div>
        <div>
          <van-icon name="star-o" size="25" />
          <!-- <van-icon v-else name="star" size="25" color="#ffc632" /> -->
          <div>收藏</div>
          <!-- <div v-else>已收藏</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useDouguoStore } from "@/stores/douguo";
import { ref, type Ref } from "vue";
import router from "@/router";
import { useRouter } from "vue-router";

const route: object = useRouter();

const douguo = useDouguoStore();

const { note, noteDetail } = storeToRefs(douguo);
const { updataNote, updataNoteDetail } = douguo;

updataNote(route.currentRoute.value.query.id);

const back = () => {
  console.log("back");
  history.go(-1);
};

const toUser = () => {
  // console.log("toUser");
  router.push({
    path: "/user",
    query: { id: route.currentRoute.value.query.user_id },
  });
};

const doCollect = () => {
  console.log("doCollect");
};

const isFollow = ref(false);
if (
  JSON.parse(localStorage.getItem("follow") || "[]").indexOf(
    route.currentRoute.value.query.user_id
  ) != -1
) {
  isFollow.value = true;
}

const follow = (id: string) => {
  // console.log("follow");
  let follows = new Set(JSON.parse(localStorage.getItem("follow") || "[]"));
  follows.add(id);
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = true;
};

const noFollow = (id: string) => {
  let follows = JSON.parse(localStorage.getItem("follow") || "[]").filter(
    (o: string) => o != id
  );
  localStorage.setItem("follow", JSON.stringify(Array.from(follows)));
  isFollow.value = false;
};
</script>

<style lang="scss" scoped>
.noteDetail {
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: white;

    .left {
      margin-left: 15px;
      width: 25px;
      height: 25px;
      cursor: pointer;
    }

    .center {
      width: 260px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left1 {
        display: flex;
        align-items: center;

        .avatar {
          width: 34px;
          height: 34px;
          margin-right: 8px;
        }

        .nick-straight {
          display: flex;
          flex-direction: column;
          font-size: 13px;
          width: 138px;

          .top {
            display: flex;
            align-items: center;
            margin-bottom: 3px;

            .nickname {
              width: 65px;
              margin-right: 5px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .lv {
              color: #c9a63b;
            }
          }

          .straight {
            color: #999;
          }
        }
      }

      .follow {
        width: 78px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
        background-color: #ffc632;
        font-size: 16px;
        cursor: pointer;
      }

      .isFollow {
        width: 78px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 15px;
        background-color: #fafafa;
        color: #999;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .right {
      width: 25px;
      height: 25px;
      margin-right: 15px;
      cursor: pointer;
    }
  }

  .likeheader {
    height: 50px;
  }

  .bigImg {
    position: relative;
    height: auto;

    .custom-indicator {
      position: absolute;
      right: 20px;
      bottom: 20px;
      padding: 0 7px;
      font-size: 12px;
      height: 24px;
      line-height: 24px;
      border-radius: 12px;
      color: white;
      background: rgba(0, 0, 0, 0.3);
    }

    .selection {
      position: absolute;
      left: 20px;
      bottom: 20px;
      height: 24px;
      line-height: 24px;
      background-color: #ffc632;
      font-size: 12px;
      padding: 0 5px;
      border-radius: 5px;
    }
  }

  .contentBox {
    padding: 0 25px 0 21px;
    margin-top: 25px;
    margin-bottom: 15px;

    .content {
      font-size: 15px;
      white-space: pre-wrap;
    }
  }

  .sub {
    padding: 0 21px;
    display: flex;
    align-items: center;
    justify-content: end;

    .right {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 13px;

      .like {
      }
    }
  }

  .likefooter {
    height: 68px;
  }

  .footer {
    width: 100%;
    height: 68px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      margin-left: 23px;

      .doComment {
        width: 85px;
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        background-color: #f5f5f5;
        padding-left: 15px;
        font-size: 14px;
        color: #999;
      }
      .comments {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-left: 10px;

        div {
          margin-left: 5px;
          height: 19px;
          line-height: 19px;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      margin-right: 23px;

      > div {
        display: flex;
        align-items: center;

        > div {
          font-size: 14px;
          margin-left: 5px;
          height: 19px;
          line-height: 19px;
        }
      }
    }
  }
}
</style>
